<template>
	<view class="watch_body" >
		<view class="main_watchData">
			<view class="row">
				<view class="row_left"><image class="picture_bottom" src="../../../static/image/icons8-sun@2x.png"></image></view>
				<view class="row_right"></view>
				<view class="row_cent"><view class="text">温度: {{watchData.temperature}}</view></view>
			</view>
			<view @click="toHeartRatetypeHistoryData()" class="row">
				<view class="row_left"><image class="picture_bottom" src="../../../static/image/xinlv@2x.png"></image></view>
				<view class="row_right"><image class="arrows" src="../../../static/image/tiaozhaun2.png"></image></view>
				<view class="row_cent"><view class="text">心率: {{watchData.heartRate}}</view></view>
			</view>
			<view @click="toMmHgtypeHistoryData()" class="row">
				<view class="row_left"><image class="picture_bottom" src="../../../static/image/xieya-2@2x.png"></image></view>
				
				<view class="row_right"><image class="arrows" src="../../../static/image/tiaozhaun2.png"></image></view>
				<view class="row_cent"><view class="text">血压: {{watchData.bloodPressureH}} / {{watchData.bloodPressureL}}</view></view>
			</view>
			<view @click="toBloodOxygentypeHistoryData()" class="row">
				<view class="row_left"><image class="picture_bottom" src="../../../static/image/xieyang@2x.png"></image></view>
				<view class="row_right"><image class="arrows" src="../../../static/image/tiaozhaun2.png"></image></view>
				<view class="row_cent"><view class="text">血氧: {{watchData.bloodOxygen}}</view></view>
			</view>
			<view class="time_chart_row">
				<view class="time_chart">临时监控时间: {{watchData.healthMonitorTime}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
		   return {
				watchData: {
					
				},
				mmHgData:{
				  categories: [],
				  series: [{
				    name: "高压",
					data: [
						
					]
				  }, {
				    name: "低压",
					data: [
						
					]
				  }]
				},
				heartRateData:{
				  categories: [
					  
				  ],
				  series: [{
				    name: "心率",
					data: [
						
					]
				  }]
				},
				bloodOxygenData:{
				  categories: [
					  
				  ],
				  series: [{
				    name: "血氧",
					data: [
						
					]
				  }]
				},
				bodyTempData:{
				  categories: [
					  
				  ],
				  series: [{
				    name: "体温",
					data: [
						
					]
				  }]
				},
				
		   }
		},
		onLoad() {
			this.getWatchData()
			this.getHistoryData()
		},
		mounted() {
			
		},
		methods:{
			getWatchData(){
				uni.showLoading({
				    title: '正在获取用户数据'
				});
				uni.request({
					url: 'http://pm.gxtimeloit.com:10035/api-smartWatch/v1/healthMonitor/' + uni.getStorageSync('imei'), 
					method: 'POST',
					header: {
						'Content-Type': 'application/x-www-form-urlencoded',
						'X-Requested-With': 'xmlhttprequest'
					},
					success: (res) => {
						if(res.data.success == false){
							if(res.data.code == "1001"){//如果请求需要登录
								uni.redirectTo({
									 url: '/pages/user/login/index'
								});
							}
						}
						this.watchData = res.data.body.data
					},
					fail: (err) => {
						uni.showToast({
							title: "请求接口失败"
						})
					},
					complete: ()=> {
						uni.hideLoading();//隐藏 loading 提示框。
					}
				})
			},
			getHistoryData(){
				const imei = uni.getStorageSync('imei');
				uni.showLoading({
				    title: '正在获取用户历史数据'
				});
				uni.request({
					url: 'http://pm.gxtimeloit.com:10035/api-smartWatch/v1/healthMonitorHis/find?imei='+imei,
					method: 'POST',
					header: {
						'Content-Type': 'application/x-www-form-urlencoded',
						'X-Requested-With': 'xmlhttprequest'
					},
					success: (res) => {
						if(res.data.success == false){
							if(res.data.code == "1001"){//如果请求需要登录
								uni.redirectTo({
									 url: '/pages/user/login/index'
								});
							}
						}
						// 传入数据，绘制图表
						this.processData(res.data.body.data.data);
					},
					fail: (err) => {
						uni.showToast({
							title: "请求接口失败"
						})
					},
					complete: ()=> {
						uni.hideLoading();//隐藏 loading 提示框。
					}
				})
			},
			processData(data){
				// 遍历data数据
				data.forEach((item, index)=>{
					// 心跳高压
					this.mmHgData.series[0].data.push(item.bloodPressureH)
					// 心跳低压
					this.mmHgData.series[1].data.push(item.bloodPressureL)
					this.mmHgData.categories.push(index+1)
					// 血氧
					this.bloodOxygenData.series[0].data.push(item.bloodOxygen)
					this.bloodOxygenData.categories.push(index+1)
					// 心率
					this.heartRateData.series[0].data.push(item.heartRate)
					this.heartRateData.categories.push(index+1)
				})
			},
			tableData(){
				uni.navigateTo({
					url: '/pages/healthData/tableData/tableData'
				})
			},
			toHeartRatetypeHistoryData(){
			let items = encodeURIComponent(JSON.stringify(this.heartRateData));
				uni.navigateTo({
					url: '/pages/healthData/watchData/heartRatetypeHistoryData?data=' + items
				})
			},
			toMmHgtypeHistoryData(){
				let items = encodeURIComponent(JSON.stringify(this.mmHgData));
				uni.navigateTo({
					url: '/pages/healthData/watchData/mmHgtypeHistoryData?data=' + items
				})
			},
			toBloodOxygentypeHistoryData(){
				let items = encodeURIComponent(JSON.stringify(this.bloodOxygenData));
				uni.navigateTo({
					url: '/pages/healthData/watchData/bloodOxygentypeHistoryData?data=' + items
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.main_watchData {
		width: 90%;
		height: 90vh;
		margin: 0 auto;
		background-color: #ffffff;
	}
	.watch_body {
		margin-top: 50rpx;
	}
	.row {
		font-weight: bold;
		background-color: #FFFFFF;
		height: 120rpx;
		vertical-align: middle;
		line-height: 100%;
		.row_left {
			float: left;
			width: 20%;
			height: 100%;
			display:flex;
			justify-content:center;
			align-items:center;
			.picture_bottom {
				width: 52rpx;
				height: 56rpx;
			}
		}
		.row_right {
			float: right;
			width: 15%;
			height: 100%;
			display:flex;
			justify-content:center;
			align-items:center;
			.arrows {
				width: 40rpx;
				height: 40rpx;
			}
		}
		.row_cent {
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content:center;
			// white-space: nowrap;
			.text {
				white-space: nowrap;
			}
		}
	}
	// 伪类实现下划线
	.row::after {
		content: "";
	    width: 86%;
	    height: 1rpx;
		position: absolute;
		transform: translate(5%, 0rpx);
	    border-bottom: 1px solid #e7e7e7;
	}
	.time_chart_row {
		font-weight: bold;
		background-color: #FFFFFF;
		height: 60rpx;
		text-align: center;
		margin: 50rpx 0rpx 0rpx 0rpx;
		.time_chart {
			width: 100%;
			height: 120rpx;
			font-weight: bold;
			font-size: 28rpx; 
			color: #959595;
		}
	}
</style>
